import React, { Component } from "react";

// 1. 通过 React.createContext()
const { Provider, Consumer } = React.createContext();
class Test extends Component {
  render() {
    return (
      <div>
        <h1>Test组件</h1>
        {/*2. 通过 Comsumer 组件获取 Provider 中共享的值*/}
        <Consumer>
          {
            (data)=><span>{data}</span>
          }
        </Consumer>
      </div>
    );
  }
}

class Demo extends Component {
  render() {
    return (
      <div>
        <h1>Demo 组件</h1>
        <Test></Test>
      </div>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div>
        {/*2. 将 Provider 组件定义在 Demo 组件上面*/}
        <Provider value="可以共享的值">
          <Demo></Demo>
        </Provider>
      </div>
    );
  }
}

export default App;
